<template>
  <div>
    <div v-if="$route.path == '/itemLists/index'" style="marginTop: 20px">
      <div style="margin-left: 80px">
        <el-button
          type="primary"
          @click="$router.push('/itemLists/index/itemAdd')"
          >添加商品</el-button
        >
        <download-excel
          class="export-excel-wrapper"
          :data="List"
          :fields="json_fields"
          name="商品数据.xls"
        >
          <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
          <el-button type="info">导出EXCEL</el-button>
        </download-excel>
      </div>
      <el-row>
        <el-col :span="24" :offset="1">
          <el-table :data="List" style="width: 100%">
            <el-table-column label="商品名称" width="180">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.itemName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="商品价格" width="180">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.itemPrice }}</span>
              </template>
            </el-table-column>
            <el-table-column label="描述" width="180">
              <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                  <p>{{ scope.row.itemDesc }}</p>
                  <div slot="reference" class="name-wrapper">
                    <el-tag size="medium">{{
                      scope.row.itemDesc.length > 15
                        ? scope.row.itemDesc.substr(0, 10) + "..."
                        : scope.row.itemDesc
                    }}</el-tag>
                  </div>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column label="销量" width="180">
              <template slot-scope="scope">
                <span
                  style="margin-left: 10px"
                  :class="{ red: scope.row.itemPrice > 500 }"
                  >{{ scope.row.itemPrice }}</span
                >
              </template>
            </el-table-column>
            <el-table-column label="封面" width="180">
              <template slot-scope="scope">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="scope.row.thumb"
                  lazy
                ></el-image>
              </template>
            </el-table-column>
            <el-table-column label="上架时间" width="180">
              <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{
                  scope.row.createTime | filterMoment
                }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)"
                  >编辑</el-button
                >
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                  >删除</el-button
                >
                <!-- 删除提示 -->
                <el-dialog
                  title="提示"
                  :visible.sync="dialogVisible"
                  width="30%"
                >
                  <span>请问要确认删除商品吗?</span>
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button
                      type="primary"
                      @click.native="sureDelete(scope.row)"
                      >确定删除</el-button
                    >
                  </span>
                </el-dialog>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6" :offset="10">
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination></div
        ></el-col>
      </el-row>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import { Message } from 'element-ui'
import { itemList, deleteItem } from '_api'
export default {
  data () {
    return {
      json_fields: {
        id: 'id',
        商品名称: 'itemName',
        商品价格: 'itemPrice',
        描述: 'itemDesc',
        商品价格: 'itemPrice',
        商品销量: 'sale',
        商品图片: 'thumb',
        商品富文本: 'content',
        商品创建时间: 'createTime'
      },
      page: 1,
      pageSize: 10,
      List: [],
      total: 0,
      dialogVisible: false
    }
  },
  created () {
    // 请求商品列表
    this.itemList()
  },
  mounted () {
    console.log(this.$route)
  },
  methods: {
    // 获取商品列表数据
    itemList () {
      itemList({
        page: this.page,
        pagesSize: this.pageSize
      }).then((res) => {
        if (res.code === 200) {
          console.log(res)
          this.List = res.data.list
          this.total = res.data.total
        }
      })
    },
    // 跳转到编辑页
    handleEdit (index, row) {
      console.log(index, row)
      this.$router.push({
        path: `/itemLists/index/itemUpdate/${row.id}`
      })
    },
    handleDelete (index, row) {
      console.log(index, row)
      console.log(row)
      this.dialogVisible = true
    },
    // 改变页面
    handleCurrentChange (a) {
      this.page = a
      this.itemList()
    },
    // 改变条数
    handleSizeChange (e) {
      console.log(e)
      this.pagesSize = e
      this.itemList()
    },
    // 删除商品
    sureDelete (row) {
      const id = row.id
      this.dialogVisible = false
      deleteItem(id).then((res) => {
        if (res.code === 200) {
          Message({
            message: '成功',
            type: 'success',
            duration: 2000,
            onClose: () => {
              this.$router.go(0)
            }
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.red {
  color: red;
}
.block {
  margin-top: 50px;
}
.export-excel-wrapper {
  display: inline-block;
  margin-left: 20px;
}
</style>
